<template>
    <div class="com-cnt">
        <div class="header">
            <p>服务类型</p>
            <div class="selectType"><input type="radio" name="type" class="redioType" @click="type='AFTERSALES_REPLACEMENT'" checked="checked"><span>换货</span></div>
            <div class="selectType"><input type="radio" name="type" class="redioType" @click="type='AFTERSALES_REFUND'"><span>仅退款</span></div>
            <div class="selectType"><input type="radio" name="type" class="redioType" @click="type='AFTERSALES_REFUND_REFUNDS'"><span>退货退款</span></div>
        </div>
        <div class="oD">
            <p>{{new Date(item.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(item.createdDate).toTimeString().substr(0,8)}}</p>
            <ul class="oC">
                <li class="picLi" v-for="jj in item.orderItems"><img :src="jj.thumbnail" alt=""></li>
            </ul>
        </div>
        <div class="oD">
            <p>问题描述(必填)</p>
            <div class="oC">
                <textarea type="text" class="description" v-model="reason"></textarea>
            </div>
        </div>
        <div class="oD">
            <p>上传图片(非必填选项,最多为三张)</p>
            <div class="oC">
                <ul class="oCdiv">
                    <!-- 图片添加 -->
                    <div class="addbox" v-if="imgBase64.length<=2">+
                        <input class="upImg" type="file" @change="getImgBase()">
                    </div>
                    <div class="item" v-for="(item, index) in imgBase64">
                        <img :src="item">
                    </div>
                </ul>
            </div>
        </div>
        <div class="submitO">
            <p>提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</p>
            <div class="btn" @click="submitInfo">提交信息</div>
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain,domain2 } from '@/assets/js/config'
//import { fastclick } from "@/assets/js/fastclick.js";
import {Loadmore} from 'mint-ui'
import Qs from 'qs'
import axios from 'axios'
import { maskTips } from '@/assets/js/dom'
import $ from 'jquery'
export default {
    name: 'afterSailDetailsPage',
    data() {
        return {
            imgBase64:[],
            type: 'AFTERSALES_REPLACEMENT',
            item: {},
            reason: ''
        }
    },
    created(){
        
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo: function(){
            let that = this
            let mobile = localStorage.getItem('phone')
            let orderSn = this.$route.query.orderSn
            axios({
                url: domain2 + '/shop/api/member/order/detail',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'mobile':mobile,'orderSn':orderSn})
            }).then(res => { that.getInfoSucc(res) }).catch(err => { console.log(err) })
        },
        getInfoSucc: function(res){
            this.item = res.data.data.order
        },
        getImgBase(){
            var _this = this;
            var event = event || window.event
            var file = event.target.files[0]
            if(file.size>3145728){
                maskTips({id:'too-big',txt:'图片不应超过3M'})
                return false
            }
            var reader = new FileReader()
            //转base64
            reader.onload = function(e) {
                _this.imgBase64.push(e.target.result)
            }
            reader.readAsDataURL(file)
        },
        //chu
        delImg(index){
            this.imgBase64.splice(index,1);
        },
        submitInfo :function(){
            let that = this
            let pp = new FormData()
            let mobile = localStorage.getItem('phone')
            let orderSn = that.$route.query.orderSn
            console.log(this.imgBase64)
            for(let ii=0;ii<this.imgBase64.length;ii++){
                pp.append('base64File'+(ii+1),this.imgBase64[ii])
            }
            pp.append('mobile',mobile)
            pp.append('orderNo',orderSn)
            pp.append('reason',that.reason)
            pp.append('type',that.type)
            console.log(pp)
            axios({
                url: domain2 + '/shop/api/member/aftersalesInfo/apply',
                method: 'post',
                contentType: false,
                contentType: 'multipart/form-data',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: pp
            }).then(res => { that.upSucc(res) }).catch(err => { console.log(err) })
        },
        upSucc: function(res){
            if(res.data.code === 0){
                maskTips({id:'succc',txt:res.data.message})
            }else{
                maskTips({id:'succc'+new Date().getTime(),txt:res.data.message})
            }
        }
    },
}
</script>
<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    font-size 12px
    .header
        height 82px
        padding 12px 0 0 12px
        border-bottom 12px solid #F0F0F0
        overflow hidden
        p 
            height 14px
            line-height 14px
            font-size 14px
        .selectType
            float left
            margin 12px 30px 0 0
            .redioType
                color #aad112
                position relative
                top 3px
                width 16px
                height 16px
    .oD
        height 152px
        padding-left 12px
        border-bottom 12px solid #F0F0F0
        p 
            height 34px
            line-height 34px
        .oC
            height 106px
            padding 10px 0
            .picLi
                width 80px
                height 80px
                float left
                margin-left 10px
                img 
                    width 100%
                    height 100%
            .description
                width 350px
                height 90px
                background #f0f0f0
            .addbox
                width 90px
                height 90px
                line-height 90px
                float left
                overflow hidden
                color #999999
                font-size 30px
                text-align center
                border 2px dashed #999999
                position relative
                box-sizing border-box
                .upImg
                    width 90px
                    height 90px
                    opacity 0
                    position absolute
                    left 0
                    top 0
            .item
                float left
                margin-left 10px
                width 90px
                height 90px
                img 
                    width 100%
                    height 100%
    .submitO
        background #f0f0f0
        padding 12px
        p 
            color #999999
        .btn
            width 334px
            height 50px
            line-height 50px
            background #aad112
            color #ffffff
            border-radius 5px
            font-size 18px
            text-align center
            display block
            margin 20px 0 20px 10px
        
    
</style>